@import '~react-md/src/scss/react-md';
$phone-status-bar-height: 24px - 12px;

.post-page {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.post-overlap {
    margin-top: -80px !important;
    z-index: 2;
}

.post-overlap-mobile {
    margin-top: -20px !important;
    z-index: 2;
}

.post-page-contents {
    justify-content: center;
    width: 100%;
    max-width: 752px;

    .gatsby-resp-image-wrapper {
        z-index: 6 !important;
    }

    img {
        max-width: 100%;
    }

    video {
        max-width: 100%;
    }

    .post-header {
        font-size:28px;
        line-height:30px;
        margin: 0;
        max-width: 100%;
        word-wrap: break-word;
        white-space: normal;
    }

    .post {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .post-meta {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .post-body {
            max-width: 100%;

            > h1,
            > h2,
            > h3,
            > h4,
            > h5,
            > h6 {
                margin-top: 30px;
                margin-bottom: 10px !important;
            }

            li {
                margin-top: 15px;
            }

            /**
             * Based on MUICSS's Table Component
             */
            table {
                width: 100%;
                max-width: 100%;
                margin-bottom: 20px;
            }

            table > thead > tr > th,
            table > tbody > tr > th,
            table > tfoot > tr > th {
                text-align: left;
            }

            table > thead > tr > th,
            table > thead > tr > td,
            table > tbody > tr > th,
            table > tbody > tr > td,
            table > tfoot > tr > th,
            table > tfoot > tr > td {
                padding: 10px;
                line-height: 1.429;
            }

            table > thead > tr > th {
                border-bottom: 2px solid rgba(0, 0, 0, 0.12);
                font-weight: 700;
            }

            table > tbody + tbody {
                border-top: 2px solid rgba(0, 0, 0, 0.12);
            }

            table > tbody > tr > td {
                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
            }

            :target::before {
                content: '';
                display: block;
                position: relative;
                height: $md-toolbar-mobile-portrait-height + $phone-status-bar-height;
                margin: -($md-toolbar-mobile-portrait-height + $phone-status-bar-height) 0 0;
            }
        }
    }
}
